<h2 mat-dialog-title>
    <mat-icon class="ama-mapping-icon">compare_arrows</mat-icon>{{'SDK.MAPPING_DIALOG.TITLE' | translate}}
</h2>

<mat-dialog-content class="ama-properties-content mapping-dialog-content" data-automation-id="mapping-dialog">
    <div class="ama-mapping-dialog-content-container">
        <div class="ama-mapping-dialog-selector-container" *ngIf="isMappingSelectorEnabled()">
            <span class="ama-mapping-dialog-selector-title">
                {{ 'SDK.MAPPING_DIALOG.SELECTOR_TITLE' | translate }}
            </span>
            <mat-form-field class="ama-mapping-dialog-selector">
                <mat-select [(ngModel)]="mappingType" (selectionChange)="variableMappingTypeChange($event)">
                    <mat-option [value]="'input'">
                        {{ 'SDK.MAPPING_DIALOG.INPUT_MAPPING' | translate }}
                    </mat-option>
                    <mat-option [value]="'output'">
                        {{ 'SDK.MAPPING_DIALOG.OUTPUT_MAPPING' | translate }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <div class="ama-mapping-body">
            <div class="ama-mapping-table-viewer {{mappingType}}-mapping-table">
                <mat-table [dataSource]="dataSource" [trackBy]="trackBy">
                    <ng-container matColumnDef="name">
                        <mat-header-cell *matHeaderCellDef><span *ngIf="mappingType === 'input'">{{ keyColumnHeader |
                                translate }}</span>
                            <span *ngIf="mappingType === 'output'">{{ 'SDK.MAPPING_DIALOG.OUTPUT_PARAMETER' | translate
                                }}/{{ 'SDK.MAPPING_DIALOG.VALUE_MAPPING' | translate }}</span>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let element; index as i"
                            [attr.data-automation-id]="'variable-name-cell-' + i"
                            class="ama-ellipsis-cell {{element.readOnly ? 'mat-select-placeholder ama-input-disabled' : ''}}"
                            [ngClass]="(mappingType === 'output' && element.mappingValueType !== 'variable') ? 'ama-non-variable-mapping': 'variable-mapping'">
                            <span>
                                <span>
                                    {{element.label || element.name | variablevalue}}<span
                                        *ngIf="element.required && mappingType === 'input'"
                                        class="ama-required-indicator">&nbsp;*</span>
                                </span>
                            </span>
                            <mat-icon
                                matTooltip="{{ element.description}} ({{'SDK.MAPPING_DIALOG.TYPE' | translate}}: {{element.type}})"
                                matTooltipPosition="below" class="ama-help-icon">help
                            </mat-icon>
                        </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="icon">
                        <mat-header-cell *matHeaderCellDef></mat-header-cell>
                        <mat-cell *matCellDef="let element;index as i"
                            class="{{element.readOnly ? 'mat-select-placeholder ama-input-disabled' : ''}}"
                            [attr.data-automation-id]="'variable-icon-cell-' + i">
                            <mat-icon *ngIf="mappingType === 'input'">arrow_backward</mat-icon>
                            <mat-icon *ngIf="mappingType === 'output'">arrow_forward</mat-icon>
                        </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="value">
                        <mat-header-cell *matHeaderCellDef><span *ngIf="mappingType === 'input'">{{ valueColumnHeader |
                                translate }}/{{ 'SDK.MAPPING_DIALOG.VALUE_MAPPING' | translate }}</span>
                            <span *ngIf="mappingType === 'output'">{{ 'SDK.MAPPING_DIALOG.PROCESS_VARIABLE' | translate
                                }}</span>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let element; index as i"
                            [attr.data-automation-id]="'variable-value-cell-' + i"
                            class="ama-ellipsis-cell {{element.readOnly ? 'mat-select-placeholder ama-input-disabled' : ''}}">
                            <span
                                [ngClass]="(mappingType === 'input' && element.mappingValueType !== 'variable') ? 'ama-non-variable-mapping': 'variable-mapping'">{{element.value
                                | variablevalue}}</span>
                        </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="delete">
                        <mat-header-cell *matHeaderCellDef></mat-header-cell>
                        <mat-cell *matCellDef="let element, let i = index"
                            [attr.data-automation-id]="'variable-delete-cell-' + i">
                            <mat-icon color="primary" class="delete-btn" (click)="deleteRow(i)"
                                [attr.data-automation-id]="'delete-row-button-' + i">
                                delete
                            </mat-icon>
                        </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" (click)="editRow(i)"
                        [class.active]="i == selectedRow" [attr.data-automation-id]="'mapping-row-' + i"></mat-row>
                </mat-table>
                <button mat-raised-button class="ama-add-btn" color="primary" *ngIf="mappingType === 'output'"
                    data-automation-id="add-variable-button" (click)="addOutputMapping('')">
                    <mat-icon>add</mat-icon>
                </button>
            </div>
            <div class="ama-mapping-value-form" *ngIf="selectedRow !== undefined && selectedRow <= dataSource.length">
                <div class="ama-variable-selector">
                    <ng-container *ngIf="mappingType === 'input'">
                        <mat-label value="selectedDestination">{{ keyColumnHeader | translate}}
                        </mat-label>
                        <mat-select [disabled]="true" [value]="selectedDestination"
                            data-automation-id="input-parameter-destination-select">
                            <mat-option *ngFor="let property of inputParameters" [value]="property.name">
                                {{ property.label || property.name }}
                            </mat-option>
                        </mat-select>
                    </ng-container>
                    <ng-container *ngIf="mappingType === 'output'">
                        <mat-label value="selectedDestination">{{'SDK.MAPPING_DIALOG.PROCESS_VARIABLE' | translate}}
                        </mat-label>
                        <mat-select [value]="selectedDestination"
                            data-automation-id="process-variable-destination-select"
                            (selectionChange)="outputMappingDestinationChange($event)">
                            <mat-option *ngFor="let property of filteredProcessVariables" [value]="property.name"
                                [ngClass]="'process-variable-destination-option'">
                                {{ property.label || property.name }}
                            </mat-option>
                        </mat-select>
                    </ng-container>
                </div>
                <div class="ama-mapping-value">
                    <mat-tab-group [(selectedIndex)]="selectedTab" (selectedTabChange)="selectedTabChange()">
                        <mat-tab *ngIf="mappingType === 'input'" data-automation-id="process-variable-tab"
                            label="{{ valueColumnHeader | translate}}">
                            <ng-container *ngIf="selectedTab===0 && tabCheck === selectedTab">
                                <div class="ama-mapping-dialog-variable-selector">
                                    <modelingsdk-variable-selector [variables]="editorVariables"
                                        [varIdSelected]="variableValue | variableIdFromVariableName: editorVariables"
                                        [typeFilter]="dataSource[selectedRow].type | variablePrimitiveType"
                                        (variableSelected)="mappingChanges($event?.name,selectedRow)"
                                        [displayClearButton]="true"
                                        [attr.data-automation-id]="'process-variable-select'">
                                    </modelingsdk-variable-selector>
                                </div>
                            </ng-container>
                        </mat-tab>
                        <mat-tab *ngIf="mappingType === 'output'" data-automation-id="output-parameter-tab"
                            [disabled]="mappingType === 'output' && !dataSource[selectedRow].type"
                            label="{{'SDK.MAPPING_DIALOG.OUTPUT_PARAMETER'| translate}}">
                            <ng-container *ngIf="selectedTab===0 && tabCheck === selectedTab">
                                <mat-select [value]="dataSource[selectedRow].name"
                                    data-automation-id="output-parameter-select"
                                    (selectionChange)="mappingChanges($event.value,selectedRow)">
                                    <mat-option [value]="null">{{'SDK.MAPPING_DIALOG.NONE'| translate}}</mat-option>
                                    <mat-option
                                        *ngFor="let property of getFilteredOutputParameters(dataSource[selectedRow].type)"
                                        [value]="property.name">
                                        {{ property.label || property.name }}
                                    </mat-option>
                                </mat-select>
                            </ng-container>
                        </mat-tab>
                        <mat-tab label="{{'SDK.MAPPING_DIALOG.VALUE_MAPPING'| translate}}"
                            data-automation-id="value-mapping-tab"
                            [disabled]="mappingType === 'output' && !dataSource[selectedRow].type">
                            <ng-container *ngIf="selectedTab===1 && tabCheck === selectedTab">
                                <modelingsdk-value-type-input #valueInput data-automation-id="value-mapping-input"
                                    class="ama-value-mapping-input" (onChange)="valueMappingValueChange($event,selectedRow)"
                                    [(ngModel)]="valueValue" [index]="selectedRow+1"
                                    [type]="dataSource[selectedRow].type"
                                    [required]="dataSource[selectedRow].required"
                                    [disabled]="dataSource[selectedRow].readOnly"
                                    [extendedProperties]="extendedProperties"
                                    [model]="dataSource[selectedRow].model"
                                    [placeholder]="dataSource[selectedRow].placeholder"
                                    [autocompletionContext]="mappingType === 'output' ? outputParameters : (expressionEditorVariables || processProperties)">
                                </modelingsdk-value-type-input>
                            </ng-container>
                        </mat-tab>
                        <mat-tab label="{{'SDK.MAPPING_DIALOG.EXPRESSION_MAPPING'| translate}}"
                            data-automation-id="expression-mapping-tab">
                            <ng-container *ngIf="selectedTab===2 && tabCheck === selectedTab">
                                <modelingsdk-expression-code-editor
                                    class="monaco-editor ama-mapping-dialog-expression-editor"
                                    [attr.data-automation-id]="'mapping-dialog-expression-editor'"
                                    [expression]="expressionValue"
                                    (expressionChange)="valueMappingExpressionChange($event,selectedRow)"
                                    [variables]="mappingType === 'output' ? outputParameters : (expressionEditorVariables || processProperties)"
                                    [language]="$any(dataSource[selectedRow]) | variableExpressionLanguage"
                                    [removeEnclosingBrackets]="false" [enableDialogEditor]="true"
                                    [enableInlineEditor]="true" [removeLineNumbers]="true" [lineWrapping]="true"
                                    [nonBracketedOutput]="false">
                                </modelingsdk-expression-code-editor>
                            </ng-container>
                        </mat-tab>
                    </mat-tab-group>
                </div>
            </div>
        </div>
    </div>
</mat-dialog-content>


<mat-dialog-actions align="end">
    <span class="adf-fill-remaining-space"></span>

    <button mat-button mat-dialog-close (click)="onClose()" data-automation-id="mapping-close-button">
        {{ 'APP.DIALOGS.CANCEL' | translate }}
    </button>

    <button class="adf-dialog-action-button save-btn" color="primary" mat-button (click)="save()"
        data-automation-id="mapping-update-button">
        {{ 'APP.DIALOGS.UPDATE' | translate }}
    </button>
</mat-dialog-actions>
